<template>
   <div class="container">
        <div class="login-wrapper">
            <!-- 左 -->
            <div class="login-left">
                <h1 class="logo-wrapper">
                    <a href="../index.html"> <img src="@/assets/images/login/logo.png" alt="" class="login-img"></a>
                </h1>
                <div class="bg-wrapper">
                    <img src="@/assets/images/login/login.gif" alt="" class="login-bigimg">
                </div>
            </div>
            <!-- 右 -->
            <div class="login-right">
                <div class="top">
                    <h1 class="sign">登录</h1>
                </div>
                <div class="login-form">
                    <div class="item">
                        <div class="username-wrapper">
                            <label>账号：</label>
                            <div class="username-item">
                                <input type="text" class="username" v-model="username">
                            </div>
                        </div>
                        <div class="password-wrapper">
                            <label>密码：</label>
                            <div class="password-item">
                                <input type="password" class="password" v-model="password">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sign-btn">
                    <!-- <el-button type="primary" >主要按钮</el-button> -->
                    <button class="login-btn" @click="login">登录</button>
                </div>
                <div class="register">
                    <a href="../register/index.html">无账号?去<span>注册 > </span> </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      this.$axios({
        method: "post",
        url: "http://106.52.94.26:3001/user/login",
        data: {
          username: this.username,
          password: this.password,
        },
      }).then((res) => {
        if (res.data.code == "200") {
          console.log(res);
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: "登录失败",
            type: "error",
          });
        }
        //成功后  回调函数(箭头函数/匿名函数)
        console.log(res);
        // 在这里处理提交表单的逻辑
        // if (res.status==200) {
        //1、储存token(令牌)   保存到浏览器
        window.sessionStorage.setItem("token", res.data.token);
        //1、储存user
        window.sessionStorage.setItem("user", JSON.stringify(res.data.user));
        //2、跳转到后台主页 （编程式导航）
        this.$router.push("./home"); //./表示当前页面
        // }
      });
    },
  },
};
</script>

<style>
* {
    margin: 0;
    padding: 0;
}
button{
   
}
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-wrapper {
    display: flex;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 3px 4px #ccc;
}

.login-left {
    width: 320px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    padding: 10px;

}

.logo-wrapper {
    height: 50px;
    width: 100px;

}

.login-img {
    width: 100%;
    height: 100%;
}

.bg-wrapper {

    height: 220px;

}

.login-bigimg {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.login-right {
    width: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
}


.item {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}



label {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
}

input {
    width: 90%;
    height: 25px;
    padding: 1px 10px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid #ccc;
}

input:hover {
    border: 2px solid skyblue;
}

.sign-btn {
    display: flex;
  width: 90%;

}

.login-btn {
    font-size: 18px;
    font-weight: 400;
    border: 0;
    white-space: nowrap;
    cursor: pointer;
    background: skyblue;
    width: 90%;
    height: 32px;
    border-radius: 7px;
    justify-content: center;
    line-height: 32px;
}

.register a span {
    font-size: 14px;
    color: coral;
}
</style>